<template id="shopEvaluate">
    <div id="shopEvaluate_2">
        <div id="shopEvaluate_1">
            <div class="s_commodity_1">
                <div class="s_commodity_2" @click="commentList(id, 0)">
                    <span>用户评价({{data.comment_num}})</span>
                    <span>{{data.all_percent > 0 ? data.all_percent + '%好评率' : '暂无评论'}}</span>
                    <img src="../image/day.jpg" alt="">
                </div>
                <div class="s_commodity_3">
                    <ul>
                        <li @click="commentList(id, 0)">全部({{data.comment_num}})</li>
                        <li @click="commentList(id, 1)">无图({{data.not_img_num}})</li>
                        <li @click="commentList(id, 2)">有图({{data.img_num}})</li>
                    </ul>
                </div>
                <div class="s_container">
                    <div class="s_commodity_4" v-for="v in comment_list">
                        <p class="s_commodity_6">
                            <i class="icon iconfont icon-cstart-copy-copy rank_orange" v-for="val in v.goods_rank"></i>
                        </p>
                        <p class="s_commodity_4_1">{{v.nickname}}</p>
                        <p class="s_commodity_4_2">{{v.add_time}} {{v.goods_attr}}</p>
                        <p class="s_commodity_4_3">{{v.content}}</p>
                        <div class="s_commodity_4_4"><img :src="v.headimg" alt="" ></div>
                        <ul class="s_commodity_4_5" v-if="v.shopimg.length > 0">
                            <li v-for="val in v.shopimg"><img :src="val" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
       <!-- <v-shopCar></v-shopCar>-->
    </div>
</template>
<script>
    /*import shopCar from './shopCar.vue';*/
    export default{
        name: 'shopEvaluate',
        components:{
           /* 'v-shopCar':shopCar,*/
        },
        data() {
            return {
                id:this.$route.query.goods_id,
                data:[],
                comment_list:[]
            }
        },
        mounted:function () {
            let H = $(window).height()-60
            $('#shopEvaluate_1').height(H)
            this.commentList(0);
        },
        methods:{
            getComment:function (type) {
                this.commentList(type);
            },
            commentList:function (type, page=1) {
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=commentList',
                    {params:{goods_id:this.id, type:type, page:page}, jsonp:'callback'}
                ).then(function(res){

                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    if (page > 1) {
                        if (res.body.code == 200) {

                            this.comment_list = this.comment_list.concat(res.body.data.comment_list);
                            this.data.type = res.body.data.type;
                            this.data.page = res.body.data.page;
                            this.data.page_count = res.body.data.page_count;
                        }
                        return false;
                    } else {
                        this.data=res.body.data;
                        this.comment_list = res.body.data.comment_list;
                    }
                });
            },
            getMore:function () {
                if (this.data.page >= this.data.page_count) {
                    return false;
                }

                this.commentList(this.data.type, parseInt(this.data.page) + 1);
            }
        }
    };

</script>
<style>
    .s_container{
        min-height:3.7rem;
        width:100%;
    }
    .s_commodity_6{
        line-height:0.18rem;
        height:0.63rem;
        width:3.37rem;
        padding-left:2.43rem;
        position:absolute;

    }
    .s_commodity_6 i{
        /*  margin-top:-0.2rem;*/
        margin-right:0.1rem;
    }
    /*6*/
    .s_commodity_4_5 li img{
        display:block;
        height:1.29rem;
        width:1.29rem;
        border:0.01rem solid red;

    }
    .s_commodity_4_5 li{
        list-style:none;
        height:1.3rem;
        width:1.3rem;
        border-radius:0.05rem;
        margin-right:0.1rem;
    }
    .s_commodity_4_5{
        height:1.56rem;
        width:5.74rem;
        padding-top:0.2rem;
        display:flex;
        padding-left:0.26rem;
        overflow:hidden;
    }
    .s_commodity_4_4{
        border-radius:50%;
        position:absolute;
        top:0;
        left:0.2rem;
        height:0.62rem;
        width:0.62rem;
    }
    .s_commodity_4_4 img{
        display:block;
        height:0.62rem;
        width:0.62rem;
    }
    .s_commodity_4_3{
        min-height:0.46rem;
        line-height:0.46rem;
        color:#4e4e4e;
        font-size:0.24rem;
        padding-left:0.2rem;
    }
    .s_commodity_4_2{
        height:0.48rem;
        line-height:0.48rem;
        color:#e2e2e2;
        font-size:0.2rem;
        padding-left:0.2rem;
    }
    .s_commodity_4_1{
        height:0.62rem;
        line-height:0.62rem;
        color:#4d4d4d;
        font-size:0.2rem;
        padding-left:0.88rem;
        margin-bottom:0.05rem;
    }
    .s_commodity_4{
        width:100%;
        min-height:3.7rem;
        position:relative;
        border-bottom:0.1rem solid #f5f4f2;
    }
    /*4*/
    .s_commodity_3 ul li{
        /*   flex:1;*/
        list-style:none;
        line-height:0.5rem;
        text-align:center;
        font-size:0.22rem;
        height:0.5rem;
        width:1.3rem;
        background:#f0f0f0;
        margin-left:0.24rem;
        border-radius:0.1rem;
        /* width:auto;*/
    }
    .s_commodity_3 ul{
        height:0.82rem;
        width:100%;

        display:flex;
    }
    .s_commodity_3{
        height:0.82rem;
        padding-top:0.3rem;
        width:100%;
    }
    /*3*/
    .s_commodity_2 img{
        display:block;
        height:0.36rem;
        width:0.21rem;
        top:0.17rem;
        right:0.17rem;
        position:absolute;
    }
    .s_commodity_2 span:nth-of-type(2){
        height:0.72rem;
        line-height:0.72rem;
        color:#999999;
        font-size:0.26rem;
        float:right;
        margin-right:0.43rem;
    }
    .s_commodity_2 span:nth-of-type(1){
        height:0.72rem;
        line-height:0.72rem;
        color:#3d3d3d;
        font-size:0.26rem;
        float:left;
        margin-left:0.2rem;
    }
    .s_commodity_2{
        height:0.72rem;
        width:100%;
        position:relative;
    }
    .s_commodity_1{
        min-height:1rem;
        width:100%;
    }
    /*新版详情页*/
    #shopEvaluate_2{
        overflow-x: hidden;
    }
    .shopCar_te{
        min-height: 8.6rem;
    }
    .shopEvaluate_ping p:nth-of-type(1){
        width:100%;
        height:0.52rem;
    }
    .shopEvaluate_ping img{
        position:absolute;
        display:block;
        border-radius:50%;
        width:0.65rem;
        height:0.64rem;
        left:0.3rem;
        top:0.26rem;
    }
    .shopEvaluate_ping p:nth-of-type(3){
        width:100%;
        height:0.3rem;
        color:#313131;
        font-size:0.22rem;
        line-height:0.3REM;
        text-indent: 0.25rem;
    }
    .shopEvaluate_ping p:nth-of-type(2){
        width:100%;
        height:0.57rem;
        color:#aeaeae;
        font-size:0.17rem;
        text-indent: 0.25rem;
        line-height:0.57rem;
    }
    .shopEvaluate_ping p:nth-of-type(1) span:nth-of-type(2){
        float:right;
        width:1.76rem;
        height:0.52rem;
        line-height:0.52rem;
        text-align:center;
        color:#868686;
        font-size:0.19rem;

    }
    .shopEvaluate_ping p:nth-of-type(1) span:nth-of-type(1){
        float:left;
        height:0.52rem;
        width:3.24rem;
        line-height:0.52rem;
        /* text-align:center;*/
        text-indent: 1.04rem;
        color:#313131;
        font-size:0.16rem;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
    }
    .shopEvaluate_ping{
        width:100%;
        height:1.64rem;
        border-top:1px solid #e6e6e6;
        padding-top:0.36rem;
        position:relative;
    }
    .shopEvaluate_all ul li span{
        display:block;
        position:absolute;
        width:0.24rem;
        height:0.23rem;
        border:1px solid #b8b8b8;
        border-radius:50%;
        top:0.18rem;
        text-decoration:none;
    }
    .shopEvaluate_all ul li{
        list-style:none;
     float:left;
        width:1.78rem;
        height:0.62rem;
        line-height:0.62rem;
        text-align:center;
        color:#a6a6a6;
        font-size:0.2rem;
        position:relative;
    }
    .shopEvaluate_all ul{
        width:100%;
        height:0.62rem;
        margin-left:0.24rem;
    }
    .shopEvaluate_all{
        width:100%;
        height:0.62rem;
    }
    .shopEvaluate_top p:nth-of-type(1){
        width:4.47rem;
        height:0.35rem;
        line-height:0.35rem;
        color:#434343;
        font-size:0.17rem;
        text-indent: 0.82rem;
        position:absolute;
        left:1.94rem;
        top:0.22rem;
    }
    .shopEvaluate_top p:nth-of-type(1) i{
        color:#fe7b01;
        margin:0 0.05rem;
    }
    .shopEvaluate_top p:nth-of-type(2) i{
        color:#fe7b01;
        margin:0 0.05rem;
    }
    .shopEvaluate_top p:nth-of-type(2){
        width:4.47rem;
        height:0.35rem;
        line-height:0.35rem;
        color:#434343;
        font-size:0.17rem;
        text-indent: 0.82rem;
        position:absolute;
        left:1.94rem;
        top:0.67rem;
    }
    .shopEvaluate_top span{
        position:absolute;
        width:1.04rem;
        height:0.83rem;
        background:#ffd1a6;
        color:#fe7b01;
        text-align:center;
        line-height:0.83rem;
        border-radius:0.3rem;
        font-size:0.2rem;
        left:0.9rem;
        top:0.22rem;
    }
    .shopEvaluate_top{
        height:1.24rem;
        width:100%;
        position:relative;
        border-bottom:0.1rem solid #f5f4f2;
    }

    .commodity_more{
        width:100%;
        height:0.85rem;
    }
    .commodity_more p{
        margin:auto;
        width:1.61rem;
        height:0.42rem;
        line-height:0.42rem;
        text-align:center;
        color:#313131;
        border:1px solid #313131;
        font-size:0.2rem;
        border-radius:0.2rem;
    }
</style>
